Why do I need a grid. Web Designer Knowledge Base
Printed 2011-10-20
We have already talked about how to come up with a site and what content to fill it with. How to implement what has already been invented in such a way that it turns out neatly and stylishly?
Here the grid will be a good help. A grid is like a graph paper for a drawing, like a recipe for a schoolboy, like cells in a school notebook. Its meaning is absolutely the same: to set some kind of base under which to fit all the blocks with graphics and text so that everything is smooth and without disagreement.
I will talk about the type of meshes that I use. These grids are purely vertical. They help to place all content in a certain number of column columns. When scrolling a site made on such a grid, there will be not some mess and garbage in front of my eyes, but neatly arranged blocks of information.
I don't like grids in which there are not only vertical, but also horizontal guides, because they unnecessarily restrict freedom. Everything that concerns vertical alignment of blocks, I do “by eye” - I move the blocks up and down, starting from the feeling of how good the result looks. It's difficult to fit content into a certain number of pixels vertically: all the same, the display will be different in different browsers and the grid will “go.”
Therefore, I'm doing columns, adding small margins in the columns that create security fields, so that the content of neighboring columns does not stick to each other.
Alignment of text and graphics on these columns and uniform indentation create the very sameness, the same uniform design principle that makes the site stylish. Why this is so, I will tell later in the chapter about style. This is an important component, without which the result will be very difficult to achieve.
Yes, you can do website design without a grid - but then it's difficult to maintain all the proportions so that the page looks harmonious.
The vertical grid, on the one hand, keeps you within, so that everything is streamlined, but on the other hand, it does not limit too much, and the task of “getting” into the grid does not prevail the task is to make a good design.
More about grids in design:
Why do I need a grid
Going beyond column boundaries
Density rule
Grid and mood
Responsive Grid for Bootstrap
Formula for the grid
Method: if the grid fails